<!DOCTYPE html>
<html lang="en">
	<head>
	 <meta charset="utf-8">
	 <title>j1010_2_toggle()</title>
	 <style>
	 ul {list-style:none;}
	 </style>
	 <script src="js/jquery-2.1.1.min.js"></script>	
	 <script src="js/jquery-2.1.1.js"></script>
	 <script>
	 	$(document).ready(function(){
	 		/*$('h1').click(function(){
	 			$(this).next().toggle('slow',function(){
	 				alert('효과완료된 뒤 한번 호출되는 함수예요');
	 			});
	 		}); */
	 		
	 	$('h1').click(function(){
		 $('h1').toggle(function(){
			 //200~600
			 $(this).next().hide(200);
		 },function(){
			 $(this).next().show(600);
		 });
	 	});	
	 		
	 	
	 	});//end of $(document).ready()
	 </script>	
	</head>
	<body>
		<h1>*애니메이션</h1>
		<div>
		<h2>toggle()</h2>
		<p>Display or hide the matched elements.</p>
		</div>
		<h1>*toggle([duration],[,complete])</h1>
		<div>
		
			<p>duration:A string or number determining how long the animation will run.</p>
			<p>complete:A function to call once the animation is complete.</p>
		</div>	
		
	</body>
</html>













